<!doctype html>
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type='text/javascript' src=http://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js></script>
		<script src=/nowjs/now.js></script>
		<title>Stock Market</title>
		<link rel="sylesheet" type="text/css" href="style.css" />
<		<style type="text/css">
					body { margin: 0px; padding: 0px; width: 100%; font-family:verdana;}
			#scroller			
			{
				background-color: black;
				display:block; 
				left: 0px;
				right: 0px;
				top: 0px; 
				height:40px; 
				position:absolute;
				-moz-animation-iteration-count: infinite;
				-moz-animation-timing-function: linear;
				-moz-animation-duration:10s;
				-moz-animation-name: scroll;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
				-webkit-animation-duration:10s;
				-webkit-animation-name: scroll;
				clear: both;
			}

			#scroller ul
			{	
				align: right;
				color: white;
				list-style: none;
				display: inline;
			}
			#scroller ul li
			{
				align: right;
				list-style: none;
				display: inline;
			}	

			@-moz-keyframes scroll {
				0% {left:0;}
				100% {left:-620px;}
			} 

			#scroller:hover {
				-moz-animation-play-state: paused;
 			}


			@-webkit-keyframes scroll {
			0% {left:0;}
			100% {left:-620px;}
			}

			#scroller:hover {
			-webkit-animation-play-state: paused;
			}

			#header
			{
				margin-top: 50px;
			}
/* Table style sem vid fengum lanad hedan: http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/ */
table.table3{
    font-family:Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.7em;
    text-align:center;
    border-collapse:collapse;
}
.table3 thead th{
    padding:6px 10px;
    text-transform:uppercase;
    color:#444;
    font-weight:bold;
    text-shadow:1px 1px 1px #fff;
    border-bottom:5px solid #444;
}
.table3 thead th:empty{
    background:transparent;
    border:none;
}
.table3 thead :nth-child(2),
.table3 tfoot :nth-child(2){
    background-color: #7FD2FF;
}
.table3 tfoot :nth-child(2){
    -moz-border-radius:0px 0px 0px 5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table3 thead :nth-child(2){
    -moz-border-radius:5px 0px 0px 0px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
}
.table3 thead :nth-child(3),
.table3 tfoot :nth-child(3){
    background-color: #45A8DF;
}
.table3 thead :nth-child(4),
.table3 tfoot :nth-child(4){
    background-color: #2388BF;
}
.table3 thead :nth-child(5),
.table3 tfoot :nth-child(5){
    background-color: #096A9F;
}
.table3 thead :nth-child(5){
    -moz-border-radius:0px 5px 0px 0px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}
.table3 tfoot :nth-child(5){
    -moz-border-radius:0px 0px 5px 0px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}
.table3 tfoot td{
    font-size:38px;
    font-weight:bold;
    padding:15px 0px;
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td{
    padding:10px;
}
.table3 tbody tr:nth-child(4) td{
    font-size:26px;
    font-weight:bold;
}
.table3 tbody td:nth-child(even){
    background-color:#444;
    color:#444;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(189,189,189)),
        color-stop(0.7, rgb(224,224,224))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 39%,
        rgb(224,224,224) 70%
        );
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td:nth-child(odd){
    background-color:#555;
    color:#f0f0f0;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(85,85,85)),
        color-stop(0.7, rgb(105,105,105))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(85,85,85) 39%,
        rgb(105,105,105) 70%
        );
    text-shadow:1px 1px 1px #000;
}
.table3 tbody td:nth-last-child(1){
    border-right:1px solid #222;
}
.table3 tbody th{
    color:#696969;
    text-align:right;
    padding:0px 10px;
    border-right:1px solid #aaa;
}
.table3 tbody span.check::before{
    content : url(../images/check2.png)
}
</style> 
	</head>
	<body>
<div id="scroller">
<ul data-bind="foreach: stock">
	<li data-bind="text: name" >  </li>
	<li data-bind="text: recentChanges" >  </li>
	<li data-bind="text: price" >  </li>
</ul>	
</div>
<h2 id="header">Stock Market - <span id="un"></span> - <span id="timer">(Timer Here)</span></h2>

<table class="table3">
    <thead><tr>
        <th>Stock</th><th>Change</th><th>Price</th><th>Amount</th>
    </tr></thead>
    <tbody data-bind="foreach: stock">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: recentChanges"></td>
            <td data-bind="text: price"></td>
        <!--    <td data-bind="text: oldPrice"></td> -->
        <!--    <td><select data-bind="options: $root.availableActions, value: Stocks, optionsText: 'actionName'"></select></td> -->
            <td><input data-bind="value: buySell.amount" /></td>
	    <td><input type="button" value="Sell" id="sellButton" /></td>
	    <td><input type="button" value="Buy" id="buyButton" /></td>
	<!--    <td><button data-bind="click: sell">Sell</button></td> -->
        </tr>    
    </tbody>
</table>
	<!--<button data-bind='click: refresh'>Refresh Market</button> -->
	
	<p>Chat</p>
	<div id="messages"></div>
 	 	<input type="text" id="text-input">
  		<input type="submit" value="Send" disabled id="send-button">
  		<select id="server-room">
  		<option value="connecting" selected>Connecting...</option>	
  	</select>
	
	</body>
</html>

<script type='text/javascript'>
$(document).ready(function(){
	now.name = prompt("What's your name?", "");
	$("#un").append(now.name);
	now.receiveMessage = function(name, message){
		$("#messages").append("<br>" + name + ": " + message);
	}

	// Send message to people in the same group
	$("#send-button").click(function(){
		now.distributeMessage($("#text-input").val());
		$("#text-input").val("");
	});


	// on establishing 'now' connection, set server room and allow message sending
	now.ready(function(){
		// Pick up list of available chatrooms from server and populate dropdown 
		setServerRoomFromList(now.serverRoomsList);
		
		// By default pick the first chatroom 
		now.changeRoom($('#server-room').val());
		// Connection established and room set; allow user to start sending messages
		$("#send-button").removeAttr('disabled');
	});
	
	// On change of drop down, clear text and change server room
	$('#server-room').change(function(){
		$("#messages").html('');
		now.changeRoom($('#server-room').val());
	});

});

// populate the #server-room dropdown 
function setServerRoomFromList(roomList){
	$('#server-room').empty();
	$.each(roomList, function(key, value)
	{   
	     $('#server-room').
	          append($("<option></option>").
	          attr("value",key).
	          text(value)); 
	});
}

function Stocks(name, oldPrice, price) {
    var self = this;
    self.name = name;
    self.oldPrice = oldPrice
    self.price = price;
    self.recentChanges = calcChanges(oldPrice, price);
       
}

// Overall viewmodel for this screen, along with initial state
function StocksViewModel() {
    var self = this;

	self.availableActions = [
		{ actionName: "Buy"},
		{ actionName: "Sell"}
	]
    // Editable data
    self.stock = ko.observableArray([
        new Stocks("Stock1", 23, randomStockPrices()),
        new Stocks("Stock2", 9, randomStockPrices()),
        new Stocks("Stock3", 11, randomStockPrices()),
        new Stocks("Stock4", 32, randomStockPrices()),
        new Stocks("Stock5", 14, randomStockPrices()),
        new Stocks("Stock6", 2, randomStockPrices()),
        new Stocks("Stock7", 46, randomStockPrices())
    ]);
    
    self.refresh = function() {
		return 0;
    };
}

function randomStockPrices(oldprice){
	this.oldPrice = oldprice;
	this.price = Math.floor(Math.random()*50);
	return price;
}

function buySell(stock, amount){
	return 0;
}

function buy(stock, amount){
	return 0;
}

function sell(stock, amount){
	return 0;
}


function calcChanges(oldprice, price){
	if(price>oldprice){
		return ("+" + (price-oldprice))
	}
	else{
		return ("-" + (oldprice-price))
	}
}
ko.applyBindings(new StocksViewModel());

// nowJS



/*
$(document).ready(function(name){
	$("#title").append(""name);
	}*/
	
</script>
